import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Divider, Card, Spin, Tooltip, Button, notification, Modal } from 'antd';
import { connect, useSelector } from 'umi';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import GoodsList from '@/components/GoodsList';
import GoodsForm from '@/components/GoodsForm';
import { fetchingAddGoodsListLoading } from '../models/goods.js';

const Delete = (props) => {
  const { list, dispatch } = props;
  const { confirm } = Modal;

  // 数据倒序显示
  const reversedData = [...list].reverse();
  const loadingResult = useSelector(fetchingAddGoodsListLoading);

  const handleDelete = (value) => {
    // console.log(value.goods_name);
    dispatch({
      type: 'goods/deleteGoods',
      payload: value.goods_name,
    }).then(() => {
      notification.success({
        message: 'Delete Success!',
        className: 'custom-class',
        description: 'The product has been added to the list.',
        // onClick: () => {
        //   console.log('Notification Clicked!');
        // },
        duration: 2.5,
      });
    });
  };

  const deleteModel = (record) => {
    confirm({
      title: 'Are you sure delete this goods?',
      icon: <ExclamationCircleOutlined />,
      content: 'Delete cannot be restored!',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        handleDelete(record);
      },
      // onCancel() {
      //   console.log('Cancel');
      // },
    });
  };

  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
    },
    {
      title: 'Image',
      dataIndex: 'goods_image',
      render: (text) => <img src={text} alt="" style={{ width: '40px', height: '40px' }} />,
    },
    {
      title: 'Name',
      dataIndex: 'goods_name',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'Price_max',
      dataIndex: 'goods_price_max',
    },
    {
      title: 'Line_price_max',
      dataIndex: 'line_price_max',
    },
    {
      title: '删除按钮',
      key: 'delete',
      render: (text, record) => {
        return (
          <Tooltip key="deletePartner" title="删除商品">
            <Button
              type="text"
              onClick={() => {
                // handleDelete(record)
                // 'dianjiele'
                deleteModel(record);
              }}
            >
              <DeleteOutlined />
            </Button>
          </Tooltip>
        );
      },
    },
  ];

  useEffect(() => {
    dispatch({
      type: 'goods/getAllGoodsList',
    });
  }, [dispatch]);

  const handleFormSubmitDelete = (formData) => {
    // 处理表单数据删除
    console.log('表单数据：', formData);
    // dispatch({
    //   type: '',
    //   payload: formData,
    // })
  };

  return (
    <>
      <PageContainer title={false}>
        <Card title="删除商品">
          <GoodsForm onHandleAdd={handleFormSubmitDelete} />
        </Card>
        <Divider orientation="left">商品列表</Divider>
        {loadingResult ? <Spin size="large" /> : <GoodsList list={reversedData} columns={columns} />}
      </PageContainer>
      {/* <deleteModel /> */}
    </>
  );
};

const mapStateToProps = ({ goods }) => {
  return {
    ...goods,
  };
};
export default connect(mapStateToProps)(Delete);
